doctype html
html(ng-app="monitorApp")
	head
		meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
		title DomeOS-监控
		<!-- build:css /monitor/css/moniorApp.min.css -->
		link(rel="stylesheet" href='../lib/css/bootstrap.css' type="text/css")
		link(rel="stylesheet" href='../common/css/base.css' type="text/css")
		link(rel="stylesheet" href='css/monitor.css')
		link(rel="stylesheet" type="text/css")
		<!-- endbuild -->
		style
			include ../common/css/ng-cloak.css
	body(ng-controller="MonitorCtr")
		loading(ng-if="isLoading")
		div.monitor-header(ng-cloak) Dome OS {{monitorTypeName}}监控
		div.datepicker-component(datepicker-component date-options="[{interval:'1h',text:'实时',isDefault:true},{interval:'24h',text:'1天'}]")
		ul.monitor-options
			li(ng-cloak) 集群：{{clusterName}}
			li(ng-cloak ng-if="singleItem!==false") {{monitorTypeName}}：{{singleItem}}
			li
				| 采样方法
				.com-select-con(select-con)
					button.ui-btn.ui-btn-white.ui-btn-select(ng-cloak) {{currentSampleType.text}}
						i.icon-down
					ul.select-list
						li.select-item(ng-repeat="sampleType in sampleTypes")
							a(ng-bind="sampleType.text" ng-click="toggleSampleType($index)")
		.monitor-con(chart-height="{{monitorItem&&monitorItem.length}}")
			.monitor-line(ng-if="monitorsInfo.cpu.tableData" ng-style="getFullChartStyle()")
				.monitor-chart
					amchart(ng-model='monitorsInfo.cpu.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in monitorsInfo.cpu.tableData.head")
									span(tooltip="{{monitorsInfo.keyMap[head]}}" tooltip-placement="{{$last?'left':'top'}}" ng-bind="head")
						tbody
							tr(ng-repeat="body in monitorsInfo.cpu.tableData.body")
								td(ng-repeat="item in monitorsInfo.cpu.tableData.item")
									span( popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
			.monitor-line(ng-if="monitorsInfo.mem.tableData" ng-style="getFullChartStyle()")
				.monitor-chart
					amchart(ng-model='monitorsInfo.mem.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in monitorsInfo.mem.tableData.head" ng-bind="head")
						tbody
							tr(ng-repeat="body in monitorsInfo.mem.tableData.body")
								td(ng-repeat="item in monitorsInfo.mem.tableData.item")
									span( popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
			.monitor-line(ng-if="monitorsInfo.diskUsedMult&&monitorsInfo.diskUsedMult.length>0" ng-style="getFullChartStyle()")
				.monitor-chart
					div.monitor-chart-title
						span.chart-title 磁盘占用率(%) 分区：
						.com-select-con(select-con)
							button.ui-btn.ui-btn-select.ui-btn-white(ng-cloak) {{selectedMonitor.diskUsedMult.name}}
								i.icon-down
							ul.select-list
								li.select-item(ng-repeat="monitor in monitorsInfo.diskUsedMult")
									a(ng-bind="monitor.name" ng-click="toggleSelectedMonitor('diskUsedMult',$index)")
					div.monitor-chart-child(ng-style="getShortChatStyle()")
						amchart(ng-model='selectedMonitor.diskUsedMult.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in selectedMonitor.diskUsedMult.tableData.head" ng-bind="head")
						tbody
							tr(ng-repeat="body in selectedMonitor.diskUsedMult.tableData.body")
								//- td(ng-bind="body.timeStamp | date:'yy-MM-dd HH:mm:ss'")
								td(ng-repeat="item in selectedMonitor.diskUsedMult.tableData.item" )
									span(popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
			.monitor-line(ng-if="monitorsInfo.diskReadMult&&monitorsInfo.diskReadMult.length>0" ng-style="getFullChartStyle()")
				.monitor-chart
					div.monitor-chart-title
						span.chart-title 磁盘读取(KB/s) 设备：
						.com-select-con(select-con)
							button.ui-btn.ui-btn-select.ui-btn-white(ng-cloak) {{selectedMonitor.diskReadMult.name}}
								i.icon-down
							ul.select-list
								li.select-item(ng-repeat="monitor in monitorsInfo.diskReadMult")
									a(ng-bind="monitor.name" ng-click="toggleSelectedMonitor('diskReadMult',$index)")
					div.monitor-chart-child(ng-style="getShortChatStyle()")
						amchart(ng-model='selectedMonitor.diskReadMult.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in selectedMonitor.diskReadMult.tableData.head" ng-bind="head")
						tbody
							tr(ng-repeat="body in selectedMonitor.diskReadMult.tableData.body")
								//- td(ng-bind="body.timeStamp | date:'yy-MM-dd HH:mm:ss'")
								td(ng-repeat="item in selectedMonitor.diskReadMult.tableData.item" )
									span(popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
			.monitor-line(ng-if="monitorsInfo.diskWriteMult&&monitorsInfo.diskWriteMult.length>0" ng-style="getFullChartStyle()")
				.monitor-chart
					div.monitor-chart-title
						span.chart-title 磁盘写入(KB/s) 设备：
						.com-select-con(select-con)
							button.ui-btn.ui-btn-select.ui-btn-white(ng-cloak) {{selectedMonitor.diskWriteMult.name}}
								i.icon-down
							ul.select-list
								li.select-item(ng-repeat="monitor in monitorsInfo.diskWriteMult")
									a(ng-bind="monitor.name" ng-click="toggleSelectedMonitor('diskWriteMult',$index)")
					div.monitor-chart-child(ng-style="getShortChatStyle()")
						amchart(ng-model='selectedMonitor.diskWriteMult.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in selectedMonitor.diskWriteMult.tableData.head" ng-bind="head")
						tbody
							tr(ng-repeat="body in selectedMonitor.diskWriteMult.tableData.body")
								//- td(ng-bind="body.timeStamp | date:'yy-MM-dd HH:mm:ss'")
								td(ng-repeat="item in selectedMonitor.diskWriteMult.tableData.item" )
									span(popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
			.monitor-line(ng-if="monitorsInfo.netIn.tableData" ng-style="getFullChartStyle()")
				.monitor-chart
					amchart(ng-model='monitorsInfo.netIn.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in monitorsInfo.netIn.tableData.head" ng-bind="head")
						tbody
							tr(ng-repeat="body in monitorsInfo.netIn.tableData.body")
								td(ng-repeat="item in monitorsInfo.netIn.tableData.item")
									span( popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
			.monitor-line(ng-if="monitorsInfo.netOut.tableData" ng-style="getFullChartStyle()")
				.monitor-chart
					amchart(ng-model='monitorsInfo.netOut.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in monitorsInfo.netOut.tableData.head" ng-bind="head")
						tbody
							tr(ng-repeat="body in monitorsInfo.netOut.tableData.body")
								td(ng-repeat="item in monitorsInfo.netOut.tableData.item")
									span( popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
			.monitor-line(ng-if="monitorsInfo.netInMult&&monitorsInfo.netInMult.length>0" ng-style="getFullChartStyle()")
				.monitor-chart
					div.monitor-chart-title
						span.chart-title 网络流入(KB/s) 网卡：
						.com-select-con(select-con)
							button.ui-btn.ui-btn-select.ui-btn-white(ng-cloak) {{selectedMonitor.netInMult.name}}
								i.icon-down
							ul.select-list
								li.select-item(ng-repeat="monitor in monitorsInfo.netInMult")
									a(ng-bind="monitor.name" ng-click="toggleSelectedMonitor('netInMult',$index)")
					div.monitor-chart-child(ng-style="getShortChatStyle()")
						amchart(ng-model='selectedMonitor.netInMult.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in selectedMonitor.netInMult.tableData.head" ng-bind="head")
						tbody
							tr(ng-repeat="body in selectedMonitor.netInMult.tableData.body")
								//- td(ng-bind="body.timeStamp | date:'yy-MM-dd HH:mm:ss'")
								td(ng-repeat="item in selectedMonitor.netInMult.tableData.item" )
									span(popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
			.monitor-line(ng-if="monitorsInfo.netOutMult&&monitorsInfo.netOutMult.length>0" ng-style="getFullChartStyle()")
				.monitor-chart
					div.monitor-chart-title
						span.chart-title 网络流出(KB/s) 网卡：
						.com-select-con(select-con)
							button.ui-btn.ui-btn-select.ui-btn-white(ng-cloak) {{selectedMonitor.netOutMult.name}}
								i.icon-down
							ul.select-list
								li.select-item(ng-repeat="monitor in monitorsInfo.netOutMult")
									a(ng-bind="monitor.name" ng-click="toggleSelectedMonitor('netOutMult',$index)")
					div.monitor-chart-child(ng-style="getShortChatStyle()")
						amchart(ng-model='selectedMonitor.netOutMult.chartData' type="serial")
				.monitor-table
					table.ui-table
						thead
							tr
								th(ng-repeat="head in selectedMonitor.netOutMult.tableData.head" ng-bind="head")
						tbody
							tr(ng-repeat="body in selectedMonitor.netOutMult.tableData.body")
								//- td(ng-bind="body.timeStamp | date:'yy-MM-dd HH:mm:ss'")
								td(ng-repeat="item in selectedMonitor.netOutMult.tableData.item" )
									span(popover-trigger="mouseenter" popover="{{body[item].tip}}" ng-bind="body[item].text")
		script(type="text/ng-template" id="warningModal.html")
			.d-modal-header 警告
			.modal-body
				p.txt-error(ng-bind="titleInfo" ng-class="{'font-size-16':detailInfo}")
				p.txt-error.tool-wrap-break(ng-bind="detailInfo")
			.modal-footer
				button.ui-btn.ui-btn-error.ui-btn-sm(ng-click="cancel()") 确定
		div
		<!-- build:js /monitor/js/lib.min.js -->
		script(type="text/javascript" src="../lib/js/jquery.min.js")
		script(type="text/javascript" src="../lib/js/angular.min.js")
		script(type="text/javascript" src="../lib/js/angular-locale_zh-cn.js")
		script(type="text/javascript" src="../lib/js/ui-bootstrap-tpls.min.js")
		script(type="text/javascript" src="../lib/js/angular-animate.min.js")
		script(type="text/javascript" src="../lib/js/amcharts.js")
		script(type="text/javascript" src="../lib/js/serial.js")
		script(type="text/javascript" src="")
		<!-- endbuild -->
		<!-- build:js /monitor/js/monitorApp.min.js -->
		script(type="text/javascript" src="../common/angularAmchartsModule/amchartsModule.js")
		script(type="text/javascript" src="../common/publicModule/publicModule.js")
		script(type="text/javascript" src="../common/publicModule/directive/publicDirective.js")
		script(type="text/javascript" src="../common/domeModule/domeModule.js")
		script(type="text/javascript" src="js/monitor.js")
		script(type="text/javascript" src="")
		<!-- endbuild -->
